<script lang="ts">
	import { Any } from '$lib/api/proto/google/protobuf/any';
	import { ChoiceQuestion } from '$lib/api/proto/resource_exam_type_api';

	interface Props {
		question: Any;
	}
	let props: Props = $props();

	let question = $state(Any.unpack(props.question, ChoiceQuestion));

	$effect(() => {
		question = Any.unpack(props.question, ChoiceQuestion);
	});
</script>

<div class="prose max-w-none p-2 w-full">
	<h3>问题:{question.question}</h3>
	<h4>选项:</h4>
	{#each question.choiceList as choice}
		<div class="flex gap-2">
			<span>{choice.label}:</span>
			<span>{choice.value}</span>
		</div>
	{/each}
	<h4>正确答案:</h4>
	<div class="flex gap-2">
		{#each question.choiceList as choice}
			{#if choice.rightAnswer}
				<span>{choice.label}</span>
			{/if}
		{/each}
	</div>
</div>
